<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 800px;
            /* height: 400px; */


            border-spacing: 5px;
            table-layout: fixed;

            /* 文本对齐方式 */
            text-align: center;
            /* 行高 => 一行文本占据的高度 */
            line-height: 40px;



        }

        /* 群组选择器: 同时选中多个元素,添加样式 */
        td {
            /* 边框: 变量的宽度  边框的样式(实线)  边框的颜色 */
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <!-- table>tr*9>td*9{$} -->
    <!-- <table>
        <tr >
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table> -->




</body>
<script>
    /* document.write("<table>");

    var i = 1;
    while(i <= 9){

        document.write("<tr>");
            
        var j = 1;
        while(j <= 9){ // i =>  1  2  3
            // document.write(j + "x" + i + "=" + i * j + " ");
            document.write("<td>");
            document.write(j);    
            document.write("</td>");
                
            j++;
        }

        document.write("</tr>");

        i++;
    }

    document.write("</table>");
 */


    document.write("<table>");

    var i = 1;
    while (i <= 9) {

        document.write("<tr>");

        var j = 1;
        while (j <= i) { // i =>  1  2  3
            document.write("<td>");
            document.write(j + "x" + i + "=" + i * j );
            document.write("</td>");

            j++;
        }

        document.write("</tr>");

        i++;
    }

    document.write("</table>");






</script>

</html>